<template>
  <div>
    <div class="w-[99%] h-[68vh]">
      <el-scrollbar>
        <div class="flex flex-wrap" v-loading="loading">
          <div
            v-if="menuList.items.length > 0"
            v-for="(item, index) in menuList.items"
            :key="index"
            class="item relative !transition-all hover:translate-y-[-3px]"
          >
            <div
              v-if="item.pushStatus == 1"
              class="absolute top-[13px] right-[13px] bg-[#3a89fe] rounded-md p-[8px] shadow-lg text-[#fff] text-[12px]"
            >
              已发布
            </div>
            <!-- bg-[#292424] -->
            <div class="w-[100%] mr-[2%] h-[100%] rounded-b-lg overflow-hidden">
              <div class="w-[100%] mr-[2%] h-[210px] bg-[#232329]">
                <img
                  class="w-[100%] h-[100%] rounded-xl"
                  :src="handleImgShow(item)"
                />
              </div>
              <div style="color: aliceblue" class="mt-[5%] font-semibold">
                <span class="w-[90%] inline-block text-left cursor-pointer">{{
                  item.name
                }}</span>
                <List :id="item.id" :obj="item" @requery="getProject(null)" />
              </div>
              <div
                class="text-right text-[12px] w-[100%] pr-[5px] mt-[10px] mb-[7px] text-[#767a7d] cursor-pointer"
              >
                {{ "更新时间：" + item.updateTime }}
              </div>
            </div>
          </div>

          <el-empty
            v-else
            class="mx-auto"
            description="暂无数据"
            :image-size="200"
          /></div
      ></el-scrollbar>
    </div>
    <el-pagination
      :page-size="query.size"
      layout="prev, pager, next"
      :total="query.total"
      class="bottom-content"
      @current-change="onHandleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import List from "@renderer/components/operatButton/list.vue";
import { getPageList } from "@renderer/api/projectMenu";
import { getCoverImageUrl } from "@renderer/utils/other";
const handleImgShow = (item: any) => {
  if (item.isLocalBg == 1) {
    return getCoverImageUrl(item.bgImgUrlShow);
  } else {
    return item.bgImgUrlShow;
  }
};
const currentIcon = ref();
let loading = ref(false);
let menuList = reactive({
  items: [],
});

const query = reactive({
  name: null,
  startTime: null,
  endTime: null,
  size: 10,
  current: 1,
  total: 0,
});
const props = defineProps({
  searchVal: {
    type: String,
    default: "",
  },
  startTime: {
    type: String,
    default: "",
  },
  endTime: {
    type: String,
    default: "",
  },
});
onMounted(() => {
  setTimeout(() => {
    // 数据加载完成后的逻辑处理
    getProject(null);
  }, 200);
});
//监听查询
watch(
  [() => props.startTime, () => props.endTime],
  (newValue, oldValue) => {
    console.log(newValue);
    // query.name = newValue;
    // getProject(["2024-08-05 00:00", "2024-08-09 00:00"]);
    getProject(newValue);
  },
  {
    deep: true, // 开启深度监听
  }
);
watch(
  () => props.searchVal,
  () => {
    query.name = props.searchVal;
    if (props.startTime && props.endTime) {
      getProject([props.startTime, props.endTime]);
    } else {
      getProject(null);
    }
  }
);

// 获取项目列表
function getProject(time) {
  loading.value = true;

  if (time) {
    query.startTime = time[0];
    query.endTime = time[1];
  } else {
    query.startTime = null;
    query.endTime = null;
  }
  getPageList(query)
    .then((response: any) => {
      if (response.code == 200) {
        menuList.items = response.data.records || [];
        query.size = response.data.size;
        query.total = response.data.total;
      } else {
        menuList.items = [];
        query.size = 0;
        query.total = 0;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
  console.log(val);
  query.current = val;
  if (props.startTime && props.endTime) {
    getProject([props.startTime, props.endTime]);
  } else {
    getProject(null);
  }
};
</script>

<style lang="scss" scoped>
/* 分页模块样式 */
.bottom-content {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 15px;
  margin-bottom: 15px;
}
:deep(.btn-next) {
  background: none;
}
:deep(.btn-prev) {
  background: none;
}
:deep(.el-pager li) {
  border: 0.5px solid #101014;
  margin: 6px;
  background: none;
}
:deep(.el-pager li.is-active) {
  color: #fff;
  background: #409eff;
}
/* 功能按钮样式 */
.el-button {
  border: 0px solid #fff !important;
  margin-left: 10px;
}
.el-button:hover {
  background-color: var(--hover-color);
}
.popover {
  position: relative;
}

.item {
  width: 20%; /* 每个div占一行的20% */
  height: 40%;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
</style>
